<template>
  <div class="product-page">
    <main-header></main-header>
    <img src="https://how2j.cn/tmall/img/category/83.jpg" alt="" style="display: block;margin: 20px auto;">

    <section class="main-info" v-if="product">
      <div class="images">
        <!-- 大图 -->
        <div>
          <img src="https://how2j.cn/tmall/img/productSingle/676.jpg" alt="">
        </div>
        <!-- 大图 end -->
        <!-- 缩略图 -->
        <div>
          <img src="https://how2j.cn/tmall/img/productSingle_small/676.jpg" alt="">
          <img src="https://how2j.cn/tmall/img/productSingle_small/676.jpg" alt="">
          <img src="https://how2j.cn/tmall/img/productSingle_small/676.jpg" alt="">
          <img src="https://how2j.cn/tmall/img/productSingle_small/676.jpg" alt="">
          <img src="https://how2j.cn/tmall/img/productSingle_small/676.jpg" alt="">
        </div>
        <!-- 缩略图 end -->
      </div>
      <div class="product-info">
        <div class="title">{{product.name}}</div>
        <!-- 价格展示 -->
        <div class="price">
          <div>
            <div>价格 </div>
            <div> ¥ {{product.originalPrice}}</div>
          </div>
          <div>
            <div>促销价</div>
            <div>  ¥ {{product.promotePrice}}</div>
          </div>
        </div>
        <!-- 价格展示 end -->
        <el-divider></el-divider>
        <!-- 销量和评价 -->
        <div class="nums">
          <div>销量<span>{{product.saltDount}}</span></div>
          <div>累计评价<span>{{product.reviewCount}}</span></div>
        </div>
        <!-- 销量和评价 end -->
         <el-divider></el-divider>
         <div style="width: 100% ;height: 30px;"></div>
         <span style="font-size: 12px; color: #444444;">数量</span>
         <el-input-number v-model="num" :min="1" :max="product.stock" label="数量" size="mini"></el-input-number>
         库存{{product.stock}}件
      </div>
      <div></div>
    </section>

    <section class="content" v-if="product">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商品详情" name="first">
          <!-- 产品参数 -->
          <div class="params">

          </div>
          <!-- 产品参数 end -->
        </el-tab-pane>
        <el-tab-pane :label="'累计评价 '+product.reviewCount" name="second">

        </el-tab-pane>
      </el-tabs>
    </section>

  </div>

</template>

<script>
  import MainHeader from '@/components/main_header'
  import {getProductInfo} from '@/api/product/index.js'
  export default{
    data() {
      return {
        product:null, // 产品
        activeName:'first', // 标签索引
      }
    },
    components: {
      MainHeader
    },
    methods: {
      async getProduct() {
        let data = {
          pid:this.$route.query.id
        }
        let res = await getProductInfo(data)
        if(res.code == 200){
          this.product = res.data.Product
        }
        else{
          this.$message.error(res.message)
        }
      }
    },
    created() {
      this.getProduct()
    }
  }
</script>

<style scoped>
  .main-info{
    display: flex;
    width: 1024px;
    margin: 0 auto;
    justify-content: space-between;
  }
  .images{
    width: 400px;

  }
  .images>div:first-child{
    width: 400px;
    height: 400px;
    border: 1px solid #eeeeee;
    padding: 10px;
    box-sizing: border-box;
  }
  .images>div:first-child>img{
    width: 380px;
    height: 380px;
  }
  .images>div:nth-child(2){
    width: 400px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
  }
  .images>div:nth-child(2)>img{
    width: 60px;
    height: 60px;
    border: 1px solid white;
  }
  .images>div:nth-child(2)>img:hover{
    border: 1px solid #000000;
  }
  .product-info .title{
    font-weight: 600;
  }
  .product-info .price{
    background-color: #E8E8E8;
    width: 533px;
    height: 145px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .product-info .price>div{
    display: flex;
  }
  .product-info .price>div>div:first-child{
    width: 50px;
    font-size: 12px;
    color: #606266;
    height: 40px;
  }
  .product-info .price>div>div:nth-child(2){
    width: 150px;
  }
  .product-info .price>div:first-child>div:nth-child(2){
    font-size: 12px;
    text-decoration: line-through;
  }
  .product-info .price>div:nth-child(2)>div:nth-child(2){
    font-size: 22px;
    color: #C60A0A;
    font-weight: 800;
  }
  .product-info .nums{
    display: flex;
    font-size: 13px;
    height: 40px;
    line-height: 20px;
  }
  .product-info .nums>div{
    width: 50%;
    margin: 10px 0;
    text-align: center;
  }
  .product-info .nums>div:first-child{
    border-right: 1px solid #eeeeee;
  }
  .product-info .nums>div>span{
    color: #C60A0A;
    margin-left: 3px;
    font-weight: 600;
  }

  .content{
    width: 900px;
    margin: 20px auto;
  }


</style>
